import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { TopicsWrapper, TopicsItem, TopicsMore } from '../styled';

class Topics extends PureComponent {
	render() {
		return(
			<TopicsWrapper>
				{this.props.list.map((item) => {
					return (
						<TopicsItem key={item.get('id')}>
						<img
							className="Topics-pic"
							alt=""
					 		src={item.get('imgUrl')} />
						{item.get('title')}
				</TopicsItem>
					)
				})}
				<TopicsMore>更多热门专题 > </TopicsMore>
			</TopicsWrapper>
		)
	}
}

const mapStateToProps = (state) =>({
	list: state.get('home').get('topicList')	
});

export default connect(mapStateToProps, null)(Topics);